<template>
  <div class="info-wrap">
    <div class="info-aside">
      <div v-for="(item, index) in nav" :key="index">
        <div class="menu-title">{{ item.title }}</div>
        <el-menu v-if="item.children" class="el-menu-sm" :default-active="$route.path">
          <template v-for="(nav, serial) in item.children">
            <el-submenu v-if="nav.children" :key="serial" :index="nav.path">
              <template slot="title">
                <span>{{ nav.title }}</span>
              </template>

              <router-link v-for="(subNav, k) in nav.children" :key="k" :to="getPath(subNav.path)">
                <el-menu-item :index="subNav.path">
                  <span slot="title">{{ subNav.title }}</span>
                </el-menu-item>
              </router-link>
            </el-submenu>

            <router-link v-else :key="serial" :to="getPath(nav.path)">
              <el-menu-item :index="nav.path">
                <span slot="title">{{ nav.title }}</span>
              </el-menu-item>
            </router-link>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="info-content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      nav: [
        {
          title: '贷后管理',
          children: [
            {
              path: '/credit/task/after',
              title: '贷后管理',
              children: [
                {
                  path: '/credit/task/after/abnormal',
                  title: '监管记录',
                },
                {
                  path: '/credit/task/after/report',
                  title: '监管报告',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  computed: {
    queryId() {
      return this.$route.query.id
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getPath(path) {
      return this.queryId ? `${path}?id=${this.queryId}` : path
    },
  },
}
</script>
<style scoped lang="scss">
$info-aside-width: 200px;

.info-wrap {
  margin-left: -$grid-gutter-width / 2;

  .info-aside {
    width: $info-aside-width;
    background-color: #fff;
    position: fixed;
    top: $header-height + $crumb-height;
    bottom: 0;
    overflow-y: auto;
    box-shadow: $box-shadow-base;

    @include scrollbar-theme();
  }

  .info-content {
    margin-left: $info-aside-width + $grid-gutter-width / 2;
  }

  .menu-title {
    padding: 1.5rem 1rem 1rem 1rem;
    font-weight: bold;
  }
}
</style>
